<template>
	<view class="home-container">
		<!-- 头部用户信息区域 -->
		<view class="header-section">
			<view class="user-info">
				<image class="user-avatar" :src="userInfo.avatar" mode="aspectFill"></image>
				<view class="user-details">
					<text class="welcome-text">欢迎回来</text>
					<text class="user-name">{{ userInfo.nickname }}</text>
							</view>
							</view>
			<view class="notification-icon" @click="handleNotification">
				<text class="bell-icon">🔔</text>
				<view class="notification-badge" v-if="notificationCount > 0">
					<text class="badge-text">{{ notificationCount }}</text>
							</view>
							</view>
						</view>

		<!-- 搜索栏 -->
		<view class="search-section">
			<view class="search-bar">
				<text class="search-icon">🔍</text>
				<input class="search-input" placeholder="搜索设备或功能..." v-model="searchKeyword" @confirm="handleSearch" />
				<text class="voice-icon" @click="handleVoiceSearch">🎤</text>
							</view>
						</view>
		
		<!-- 我的产品区域 -->
		<view class="products-section">
			<view class="section-header">
				<text class="section-title">我的产品</text>
				<!-- <text class="view-all-btn" @click="handleViewAll">查看全部</text> -->
			</view>

			<!-- 产品列表 -->
			<view class="products-list">
				<view class="product-item" v-for="(product, index) in productList" :key="index" @click="handleProductClick(product)">
					<view class="product-icon" :class="product.iconClass">
						<text class="icon-symbol">{{ product.icon }}</text>
							</view>
					<view class="product-info">
						<text class="product-name">{{ product.name }}</text>
						<text class="product-status">{{ product.onlineCount }}台设备在线</text>
							</view>
					<view class="product-status-indicator">
						<view class="status-dot" :class="product.isOnline ? 'online' : 'offline'"></view>
						<text class="arrow-icon">></text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 用户信息
				userInfo: {
					nickname: '游客',
					avatar: '/static/logo.png'
				},
				// 是否已登录
				isLoggedIn: false,
				// 通知数量
				notificationCount: 0,
				// 搜索关键词
				searchKeyword: '',
				// 产品列表数据
				productList: [
					{
						id: 1,
						name: '智能照明',
						icon: '💡',
						iconClass: 'lighting-icon',
						onlineCount: 4,
						isOnline: true,
						route: '/pages/lighting/lighting',
						needLogin: true // 需要登录才能使用
					},
					// {
					// 	id: 2,
					// 	name: '扫码取电',
					// 	icon: '⚡',
					// 	iconClass: 'power-icon',
					// 	onlineCount: 2,
					// 	isOnline: true,
					// 	route: '/pages/scan-power/scan-power',
					// 	needLogin: false // 不需要登录
					// }
				]
			}
		},
		onLoad() {
			// 页面加载时检查登录状态
			this.checkLoginStatus()
			// 加载用户信息
			this.loadUserInfo()
		},
		
		onShow() {
			// 页面显示时检查登录状态
			this.checkLoginStatus()
		},
		methods: {
			/**
			 * 检查登录状态
			 * 更新登录状态和用户信息
			 */
			checkLoginStatus() {
				const token = uni.getStorageSync('tenant_token')
				this.isLoggedIn = !!token
				
				if (this.isLoggedIn) {
					// 已登录，加载用户信息
					this.loadUserInfo()
							  } else {
					// 未登录，显示游客状态
					this.userInfo = {
						nickname: '游客',
						avatar: '/static/logo.png'
					}
					this.notificationCount = 0
				}
			},
			
			/**
			 * 加载用户信息
			 * 从本地存储或API获取用户信息
			 */
			loadUserInfo() {
				const userInfo = uni.getStorageSync('user_info')
				if (userInfo) {
					this.userInfo = userInfo
				}
			},
			
			/**
			 * 处理通知点击
			 */
			handleNotification() {
				uni.showToast({
					title: '通知功能开发中',
					icon: 'none'
				})
			},
			
			/**
			 * 处理搜索
			 * @param {Object} e 搜索事件对象
			 */
			handleSearch(e) {
				const keyword = e.detail.value || this.searchKeyword
				if (keyword.trim()) {
					uni.showToast({
						title: `搜索: ${keyword}`,
						icon: 'none'
					})
				}
			},
			
			/**
			 * 处理语音搜索
			 */
			handleVoiceSearch() {
				uni.showToast({
					title: '语音搜索功能开发中',
					icon: 'none'
				})
			},
			
			/**
			 * 处理查看全部点击
			 */
			handleViewAll() {
				uni.showToast({
					title: '查看全部功能开发中',
					icon: 'none'
				})
			},
			
			/**
			 * 处理产品点击
			 * @param {Object} product 产品对象
			 */
			handleProductClick(product) {
				console.log(JSON.stringify(product))
				console.log(!this.isLoggedIn)
				// 检查是否需要登录
				if (product.needLogin && !this.isLoggedIn) {
					uni.showModal({
						title: '需要登录',
						content: '使用此功能需要先登录，是否前往登录？',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/login/login'
								})
							}
						}
					})
					return
				}
				
				// 直接跳转到对应页面
				if (product.route) {
					uni.navigateTo({
						url: product.route
					})
				} else {
					uni.showToast({
						title: `${product.name}功能开发中`,
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style>
	@import "./index.css";
</style>